<template>
	<div class="main">
		<section>
			<img src="//hh.ppdaicdn.com/static/images/landing/bkg_01.png?v=1" class="bkg" alt="bkg">
		</section>
		<section>
			<img src="//hh.ppdaicdn.com/static/images/landing/bkg_02.png?v=1" class="bkg" alt="bkg">
		</section>
		<section>
			<label>
				<input v-model="phoneNum" @blur="blurPhoneNum" type="text" maxlength="11" placeholder="请输入手机号码">
			</label>
			<a @click="download">立即领取</a>
		</section>
		<section>
			<img src="//hh.ppdaicdn.com/static/images/landing/bkg_03.png?v=1" class="bkg" alt="bkg">
		</section>
		<comp-loading :isShow="isLoadingShow" :type="'gif'"></comp-loading>
		<comp-toast :isShow="!!toastMsg" :message="toastMsg" :duration="toastShowTime" @hide="hideToast"></comp-toast>
	</div>
</template>

<script>
	import CompLoading from '@/components/loading.vue';
	import CompToast from '@/components/toast.vue';

	export default {
		'name': 'view-landing-index',
		'components': {
			CompLoading,
			CompToast
		},
		data() {
			return {
				'source': this.$getURLSearchParam('source'),
				'phoneNum': '',
				'isLoadingShow': false,
				'toastMsg': '',
				'toastShowTime': 2000
			};
		},
		'computed': {
			uaClient() {
				let ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return 'wechat';
				} else if (ua.match(/iPad/i) || ua.match(/iPhone/i) || ua.match(/iPod/i)) {
					return 'ios';
				} else {
					return 'android';
				}
			}
		},
		'methods': {
			blurPhoneNum() {
				this.$sensorsH5Click({
					'tgt_type': 'text',
					'tgt_name': 'h5-LP-手机号',
					'tgt_event_id': 'h5_LP_phone_number',
					'url': location.href,
					'position': '',
					'cost_time_ms': 0
				});
			},
			download() {
				if (!this.phoneNumValid(this.phoneNum)) {
					this.showToast('请输入正确手机号');
					return;
				}
				this.$sensorsH5Click({
					'tgt_type': 'button',
					'tgt_name': 'h5-LP-手机号检测',
					'tgt_event_id': 'h5_LP_phonenumber_check',
					'target_url': '',
					'url': location.href,
					'position': '',
					'value_type': 'mobilephone',
					'clk_value': this.phoneNum
				});
				this.isLoadingShow = true;
				this.$jsonp('//m.ppdai.com/Activity/ThirdInviteNewUserRecord2', {
					'mobile': this.phoneNum,
					'source': this.source,
					'subsource': JSON.stringify({
						'subsource': 'JUST_PHONE'
					})
				}).then(data => {
					if (data.Content && data.Content.IsNewUser) {
						this.$jsonp('//m.ppdai.com/Activity/ThirdInviteNewUserRecordSuccess', {
							'mobile': this.phoneNum,
							'source': this.source,
							'id': data.Content.Id
						}).then(data2 => {
							this.$sensorsH5Click({
								'tgt_type': 'button',
								'tgt_name': 'h5-LP-立即领取',
								'tgt_event_id': 'h5_LP_button',
								'target_url': '',
								'url': location.href,
								'position': '',
								'value_type': '',
								'clk_value': ''
							});
							this.isLoadingShow = false;
							this.goDownload();
						});
					} else {
						this.isLoadingShow = false;
						this.goDownload();
					}
				}).catch(err => {
					this.isLoadingShow = false;
					this.showToast('领取失败，请稍后再试');
				});
			},
			phoneNumValid(phoneNum) {
				return this.$isCellphone(phoneNum);
			},
			showToast(msg) {
				this.toastMsg = msg;
			},
			hideToast() {
				this.toastMsg = '';
			},
			goDownload() {
				if (this.uaClient === 'ios') {
					location.assign('//a.app.qq.com/o/simple.jsp?pkgname=com.ppdai.huanapp');
				} else if (this.uaClient === 'wechat') {
					location.assign(`//m.ppdai.com/act/huan/down.html?source=${this.source}`);
				} else {
					location.assign(`//m.ppdai.com/down/huanhuan/${this.source}`);
				}
			}
		}
	};
</script>

<style scoped type="text/scss">
	.main {
		background-color: #ffffff;
	}
	section {
		background-color: #ffffff;
	}
	.bkg {
		display: block;
		width: 100%;
	}
	label,
	a {
		display: block;
		width: 78%;
		height: 3em;
		margin: 0 auto;
		border-radius: 1.5em;
		line-height: 3em;
	}
	label {
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 1.5em;
		border: 1px solid #8f8f8f;
		background-color: #eff8ff;
	}
	input {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: none;
		outline: none;
		background-color: transparent;
	}
	a {
		margin: 4% auto 0.5em;
		box-shadow: 0 0.2em 0.5em 0 rgba(0,0,0,0.2);
		color: #ffffff;
		text-align: center;
		background-color: #4c80ed;
	}
</style>
